import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Popconfirm, Slider } from 'antd'
import { partSettings } from './PartSettings'

import { deleteOne, toggleHiddenState } from '../redux/action/drawActions'
import { setPencilWidth, setEraserWidth } from '../redux/action/freeDrawingActions'

class EachDrawObj extends Component {
	toggleHiddenState = () => {
		this.props.toggleHiddenState(this.props.controlObj)
	}
	editPainting = () => {
		const {
			type,
			name,
			params,
			style: { color, width },
			controlObj,
			fae,
		} = this.props
		partSettings.toEdit(controlObj.globalType, type, name, params, fae, color, width, controlObj)
	}
	removeThis = () => {
		this.props.deleteOne(this.props.controlObj)
	}
	render() {
		return (
			<div className='painting-obj'>
				<div>
					<div
						className={`colorSquare iconfont ${this.props.show ? '' : 'icon-bukejian'}`}
						style={{ backgroundColor: this.props.show ? this.props.style.color : null }}
						onClick={this.toggleHiddenState}
					></div>
					<div className='text'>{this.props.name}</div>
				</div>
				<div>
					<span className='edit iconfont icon-edit' onClick={this.editPainting}></span>
					<Popconfirm
						placement='topRight'
						title='你确定要删除该绘制对象吗？'
						onConfirm={this.removeThis}
						okText='确定'
						cancelText='取消'
					>
						<span className='edit iconfont icon-delete'></span>
					</Popconfirm>
				</div>
			</div>
		)
	}
}
function StateField(props) {
	return (
		<aside className='right-side-tool'>
			<div className='take-color-field'>
				<input type='color' value='#61dafb' readOnly/>
			</div>
			<div className='change-width-field'>
				<Slider
					min={1}
					max={20}
					value={props.useErasing ? props.eraserWidth : props.pencilWidth}
					onChange={props.useErasing ? props.setEraserWidth : props.setPencilWidth}
				/>
			</div>
			<div className='painting-obj-field'>
				{props.drawList.map((obj, idx) => (
					<EachDrawObj
						{...obj}
						controlObj={obj}
						deleteOne={props.deleteOne}
						toggleHiddenState={props.toggleHiddenState}
						key={idx}
					/>
				))}
			</div>
		</aside>
	)
}
const mapStateToProps = state => ({
	drawList: state.drawReducer.drawList,
	useErasing: state.canvasReducer.useErasing,
	pencilWidth: state.freeDrawingReducer.pencilWidth,
	eraserWidth: state.freeDrawingReducer.eraserWidth,
})

export default connect(mapStateToProps, { deleteOne, toggleHiddenState, setPencilWidth, setEraserWidth })(StateField)
